<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>绑定</title>
    <!---->
    <link rel="icon" th:href="@{/favicon.ico}" href="/favicon.ico">
    <!--  -->
    <link rel="stylesheet" th:href="@{/plugins/mui/css/mui.min.css}" href="/static/plugins/mui/css/mui.min.css"/>
    <link rel="stylesheet" th:href="@{/css/style.css}" href="/static/css/style.css"/>

    <style>
        .mui-content{
            padding: 0.8rem;
        }
        .mui-row{
            margin-top: 0.8rem;
        }

    </style>
</head>

<body>
<div class="bg">
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">注册绑定</h1>
    </header>
    <!--  -->
    <div class="mui-content center">

        <div class="mui-row">
            <form th:action="@{/wx/bindUser}"  method="post">
                <div class="mui-input-group">
                    <div class="mui-input-row">
                        <input id='account' name="username" type="text" class="mui-input-clear" required autocomplete="off"
                               placeholder="请输入用户名">
                    </div>
                </div>

                <div class="mui-row mui-text-center">
                    <button id="login" class="mui-btn mui-btn-block mui-btn-primary" data-loading-text="绑定中">绑&nbsp;定</button>
                </div>
            </form>
        </div>

    </div>
</div>

<script type="text/javascript" th:src="@{/plugins/jquery/jquery-2.1.4.js}"
        src="/static/plugins/jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" th:src="@{/plugins/mui/js/mui.min.js}"
        src="/static/plugins/mui/js/mui.min.js"></script>
<script>
    (function ($, m, doc) {
        //console.log("登录"
        var ctxPath = $("meta[name=ctxPath]").attr("content");
        if (!ctxPath) {
            ctxPath = "/";
        }

        $("#data-form").validate({
            onsubmit: true, //在提交时验证
            onfocusout: false,//在得到焦点时是否验证
            onkeyup: false,//在键盘弹起时验证
            rules: {
                username: {
                    required: true //必须
                }
            },
            messages: {
                username: {
                    required: "用户名不能为空"
                }
            },
            submitHandler: function (form) { //验证成功时调用
                console.log(form);
                // $.ajax({
                //     url: ctxPath + "login",
                //     type: "POST",
                //     dataType: "JSON",
                //     data: $("#data-form").serialize(),
                //     success: function (result) {
                //         if (result.success) {
                //             window.location.href = ctxPath;
                //         } else {
                //             m.alert(result.msg);
                //         }
                //     },
                //     error: function (error) {
                //         m.alert("网络请求错误:（" + error.status + "）");
                //     }
                // });
                //
                // return false;
                return form;
            },
            invalidHandler: function (form, validator) {  //不通过回调
                console.log(validator);
                var errorList = validator.errorList;
                if (errorList && errorList.length > 0) {
                    var error = errorList[0];
                    //m.toast(error.message, {duration: 'long', type: 'div'})
                    m.alert(error.message);
                }
                return false;
            }
        });
    }(jQuery, mui, document));
</script>
</body>

</html>